<template>
  <div>
    <div class="home-content">
      <div class="content" v-if="loading">
        <div class="echarts">
          <div class="home-title">
            <span>基本信息</span><span>{{ tenantInfo.tenantName }}</span>
          </div>
          <div class="student-number">
            <!-- <div style="" class="number-bg">
              <div>学生总数</div>
              <div class="number">
                <span v-if="schoolDataObj.totalTenantPostNumber">{{
                  schoolDataObj.totalTenantPostNumber.studentNum || 0
                }}</span>
                人
              </div>
            </div> -->
            <div class="releaseFinish-bg">
              <div>发布测评人数</div>
              <div class="number">
                <span style="cursor: pointer">{{
                  schoolDataObj.findReleaseFinishTestNum.length
                    ? schoolDataObj.findReleaseFinishTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div>
            <div class="fisish-bg">
              <div>已完成测评人数</div>
              <div class="number">
                <span
                  style="cursor: pointer"
                  @click="handleDown({})"
                  v-if="schoolDataObj.findFinishTestNum"
                  >{{
                    schoolDataObj.findFinishTestNum.length
                      ? schoolDataObj.findFinishTestNum[0].num
                      : 0
                  }}</span
                >
                人
              </div>
            </div>
            <div class="noreleaseFinish-bg">
              <div>未完成测评人数</div>
              <div class="number">
                <span style="cursor: pointer" @click="linkDealt()">{{
                  schoolDataObj.findNoReleaseFinishTestNum.length
                    ? schoolDataObj.findNoReleaseFinishTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div>
            <!-- <div class="finish-no-bg">
              <div>未完成测评人数</div>
              <div class="number">
                <span style="cursor: pointer" @click="linkDealt()">{{
                  schoolDataObj.findFinishNoTestNum.length
                    ? schoolDataObj.findFinishNoTestNum[0].num
                    : 0
                }}</span>
                人
              </div>
            </div> -->
            <div class="warning-bg">
              <div>预警人数</div>
              <div class="number">
                <span
                  style="cursor: pointer"
                  @click="handleDown({ level: '1,2,3,4' })"
                  >{{ schoolDataObj.findLevelAllNum[0].num }}</span
                >
                人
              </div>
            </div>
          </div>

          <div class="home-title">常用功能</div>
          <div class="home-to">
            <div
              class="container"
              v-for="item in typeList"
              :key="item.title"
              @click="goSkip(item)"
            >
              <div class="img-div"><img :src="item.img" alt="" /></div>
              <div>{{ item.title }}</div>
            </div>
          </div>
          <div class="home-title">
            {{ `${isEnterprise ? "员工" : "各年级"}预警分布` }}
          </div>
          <div>
            <el-row class="marginInfo" style="margin-left: 5px">
              <div
                class="marginInfo"
                ref="gradeWarningDistribution"
                id="gradeWarningDistribution"
                style="height: 300px"
              ></div>
            </el-row>
          </div>
        </div>
        <!-- <div class="advertisement">
          <div class="home-title">心理室建设方案</div>
          <div class="img-div" @click="goSkip({ name: '心理室建设' })">
            <img src="./../img/心理室.png" alt="" />
          </div>
          <div class="menu">
            <div
              @click="goSkip({ name: '心理室建设' })"
              v-for="item in menu"
              :key="item.title"
            >
              <img src="./../img/icon.png" alt="" /><span>{{
                item.title
              }}</span>
            </div>
          </div>
          <div style="font-size: 14px; color: #409eff">
            <span>客服电话：400-873-8828</span>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTermListAll } from "@/api/system/semester";
import {
  findAllGradeLevelInterveneNum,
  findFinishTestNum,
  findFinishNoTestNum,
  totalTenantPostNumber,
  findLevelAllNum,
  findReleaseFinishTestNum,
  findNoReleaseFinishTestNum,
} from "@/api/report/report";
import { getList } from "@/api/system/dict";
import { uniqBy } from "lodash-es";
import { getTenantInfo } from "@/api/system/tenant.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      typeList: [
        {
          logo: "",
          color: "#85b911",
          title: "数据看板",
          name: "学校看板",
          img: require("./../img/数据看板.png"),
        },
        {
          logo: "",
          color: "#f94c3e",
          title: "危机预警",
          name: "我的待办",
          img: require("./../img/趣味测试.png"),
        },
        // {
        //   logo: "",
        //   color: "#7e93fc",
        //   title: "量表管理",
        //   name: "量表平台",
        //   img: require("./../img/心理云平台.png"),
        // },
        {
          logo: "",
          color: "#f3ad27",
          title: "团体普查",
          name: "项目管理",
          img: require("./../img/心理测试.png"),
        },
        {
          logo: "",
          color: "#46bcbd",
          title: "档案管理",
          name: "个人档案",
          img: require("./../img/心理室建立.png"),
        },
        {
          logo: "",
          color: "#0393f1",
          title: "信息采集",
          name: "用户管理",
          img: require("./../img/心理老师.png"),
        },
        {
          logo: "",
          color: "#f94c3e",
          title: "心理老师",
          name: "专家列表",
          img: require("./../img/心理测试_1.png"),
        },
      ],
      schoolDataObj: {},
      yearlyList: [],
      semesterList: [],
      yearly: "",
      half: "",
      termId: "",
      loading: false,
      menu: [
        {
          title: "来访接待室",
        },
        {
          title: "心理测评室",
        },
        {
          title: "运动放松室",
        },
        {
          title: "团体活动室",
        },
        {
          title: "沙盘游戏室",
        },
        {
          title: "心理阅览室",
        },
        {
          title: "VR减压训练室",
        },
        {
          title: "音乐方式室",
        },
        {
          title: "个体咨询室",
        },
        {
          title: "情绪宣泄室",
        },
      ],
      tenantInfo: {},
      tenantId: "",
    };
  },
  created() {
    getTermListAll(1, 1000, {}).then((result) => {
      var _this = this; //注意！一定要重新定义一下this指向
      let res18DataList = result.data.data;
      for (let zz = 0; zz < res18DataList.length; zz++) {
        let item = res18DataList[zz];
        _this.yearlyList.push(item);
        _this.semesterList.push(item);
        if (item.currentFlag == "Y") {
          _this.termId = item.termId;
          // _this.half = item.half;
          _this.yearly = item.yearly;
        }
      }
      _this.yearlyList = uniqBy(_this.yearlyList, "yearly");
      _this.semesterList = uniqBy(_this.semesterList, "termId");
      this.initData();
    });

    let tenant =
      localStorage.getItem("saber-userInfo") &&
      JSON.parse(localStorage.getItem("saber-userInfo")).content.tenantId;
    this.tenantId = tenant;
    getTenantInfo(tenant).then((res) => {
      this.tenantInfo = res.data.data;
    });
  },
  computed: {
    ...mapState(["enterprise"]),
    isEnterprise() {
      let show = false;
      this.enterprise.forEach((item) => {
        if (this.tenantId == item) {
          show = true;
        }
      });
      return show;
    },
  },
  watch: {
    // isEnterprise: {
    //   handler(val) {
    //     console.log(val);
    //   },
    //   deep: true,
    // },
  },
  methods: {
    goSkip(item) {
      this.$router.push({
        name: item.name || "我的待办",
      });
    },
    initData() {
      let _this = this;
      let tenantId = JSON.parse(window.localStorage.getItem("saber-userInfo"))
        .content.tenantId;

      this.$axios
        .all([
          findAllGradeLevelInterveneNum({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          findFinishTestNum({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          findFinishNoTestNum({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          totalTenantPostNumber({ tenantId: tenantId, category: 4 }),
          findLevelAllNum({
            tenantId: tenantId,
            termId: _this.termId,
            yearly: _this.yearly,
          }),
          findReleaseFinishTestNum({
            tenantId: tenantId,
            termId: _this.term,
            yearly: _this.yearly,
          }),
          findNoReleaseFinishTestNum({
            tenantId: tenantId,
            termId: _this.term,
            yearly: _this.yearly,
          }),
          getList(1, 1000, { code: "warning_level" }),
        ])
        .then((res) => {
          _this.schoolDataObj.findAllGradeLevelInterveneNum = res[0].data.data;
          _this.schoolDataObj.findFinishTestNum = res[1].data.data;
          _this.schoolDataObj.findFinishNoTestNum = res[2].data.data;
          _this.schoolDataObj.totalTenantPostNumber = {};
          _this.schoolDataObj.totalTenantPostNumber.studentNum =
            res[3].data.data;
          _this.schoolDataObj.findLevelAllNum = res[4].data.data;
          _this.schoolDataObj.findReleaseFinishTestNum = res[5].data.data;
          _this.schoolDataObj.findNoReleaseFinishTestNum = res[6].data.data;
          _this.schoolDataObj.tenantId = tenantId;

          let levelData = [];
          res[7].data.data[0].children.map((vv) => {
            if (vv.dictKey != 0) {
              levelData.push(vv);
            }
          });
          _this.schoolDataObj.levelData = levelData;
          _this.schoolDataObj.LevelType = _this.isLoad = true;

          //父组件隐藏loading
          _this.loading = true;

          _this.$nextTick(() => {
            _this.getChartData(_this.schoolDataObj);
          });
        });
    },
    getChartData(data) {
      let obj = data;

      let levelDictValueData = [];
      for (let zz = 0; zz < obj.levelData.length; zz++) {
        levelDictValueData.push(obj.levelData[zz].dictValue);
      }

      let gradeList = {};
      let xAxisDataGrade = [];
      obj.findAllGradeLevelInterveneNum.map((item) => {
        if (!gradeList[item.code]) {
          gradeList[item.code] = [];
          xAxisDataGrade.push(item.code);
        }
        gradeList[item.code][item.level - 1] = item;
      });

      const levelList = [];

      // let newItem = { value: item.num, levelStr: item.level + "" };

      Object.values(gradeList).forEach((list) => {
        list.map((item) => {
          const level = item.level - 1;
          if (!levelList[level]) {
            levelList[level] = [];
          }
          levelList[level].push({ value: item.num, levelStr: item.level + "" });
        });
      });

      let seriesGradeData = [];
      let index = 0;
      let colorList = [
        "#FF4500",
        "#FFA07A",
        "#FFD700",
        "#8552a1",
        "#0D8FBF",
        "#224b8f",
      ];
      levelList.map((item) => {
        seriesGradeData.push({
          name: levelDictValueData[index],
          type: "bar",
          barMaxWidth: 20,
          emphasis: {
            focus: "series",
          },
          data: item,
          itemStyle: {
            normal: {
              borderRadius: [5, 5, 0, 0],
              color: colorList[index],
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  // color: "white",
                  fontSize: 12,
                },
              },
            },
          },
        });
        index++;
      });

      this.$nextTick(() => {
        this.getGradeLevel(
          "gradeWarningDistribution",
          "",
          xAxisDataGrade,
          seriesGradeData,
          levelDictValueData
        );
      });
    },
    getGradeLevel(id, title, xAxisData, seriesGradeData, legendData) {
      var chartDom = this.$refs[id];
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        legend: {
          right: "10%",
          align: "right",
          data: legendData,
          textStyle: {
            color: "black",
          },
        },
        grid: {
          top: "20%",
          bottom: "15%",
          height: 190,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "black",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "black",
            },
          },
        },
        series: seriesGradeData,
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        this.$router.push({
          name: "年级详情列表",
          query: {
            level: params.data.levelStr,
            gradeName: params.name,
            projectId: this.schoolDataObj.projectId,
            tenantId: this.schoolDataObj.tenantId,
          },
        });
      });
    },
    handleDown(linkParams) {
      linkParams = Object.assign(linkParams, {
        projectId: this.projectId,
        tenantId: this.schoolDataObj.tenantId,
      });
      this.$router.push({
        name: "年级详情列表",
        query: linkParams,
      });
    },
    linkTo() {
      let tenantId = JSON.parse(window.localStorage.getItem("saber-userInfo"))
        .content.tenantId;
      this.$router.push({
        name: "未测人数明细",
        query: {
          tenantId: tenantId,
        },
      });
    },
    linkDealt() {
      this.$router.push({
        name: "我的待办",
        query: {
          specialTypeId: "1",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./../css/bg.scss";

.home-title {
  // font-size: 18px;
  // font-weight: bold;
  // color: #0986b3;
  display: flex;
  justify-content: space-between;
}

.student-number {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: white;
  margin: 15px 0;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    // width: 23%;
    // height: 13vh;
    width: 30vh;
    min-width: 160px;
    max-width: 22%;
    height: 13vh;
    min-height: 60px;
    max-height: 80px;
    border-radius: 10px;

    .number {
      font-size: 24px;
    }
  }

  // .number-bg {
  //   background: url("./../img/pink.png") no-repeat;
  //   background-size: 100%;
  // }
}

.home-to {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // margin: 15px 0;
  font-size: 14px;
  width: 70%;
  margin: 15px auto;

  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100px;
    height: 100px;

    .img-div {
      width: 60px;
      height: 60px;
      margin: 0 auto;
      position: relative;

      img {
        width: 60px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.5s ease-in-out;
        cursor: pointer;
        border-radius: 16px;
      }

      img:hover {
        transform: scale(1.2);
        box-shadow: 0px 1px 4px #aaaaaa;
      }
    }
  }
}

.content {
  display: flex;
  justify-content: space-between;

  > .echarts {
    width: 100%;
  }

  > .advertisement {
    width: 20%;

    .img-div {
      text-align: center;
      margin: 15px 0;

      img {
        width: 100%;
        // height: 13vh;
        border-radius: 10px;
      }

      .advert-title {
        text-align: center;
      }
    }

    .menu {
      padding-left: 20px;
      > div {
        text-indent: 10px;
        margin: 20px 0;
        font-size: 14px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>